<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="increase">按钮</button>
    <span>{{ count }}</span>
  </div>
  <script type="module">
    import { createApp, ref } from './node_modules/vue/dist/vue.esm-browser.js'
    
    function useCount () {
    /**
     * ref 
     * 将基本数据转换为响应式数据
     * 与reactive区别： 
     * reactive是把一个对象转换成响应式数据
     * ref把基本数据包装成响应式对象
     * 
     * 原理: 
     * 若参数为对象则内部调用的就是reactive
     * 若参数为基本类型，则内部创建一个只有value属性的对象，value属性中具有getter和 setter
     */
      const count = ref(0)
      return {
        count,
        increase: () => {
          // 模板使用可以省略，但代码使用不可省略value
          count.value++
        }
      }
    }

    createApp({
      setup () {
        return {
          ...useCount()
        }        
      }
    }).mount('#app')
  </script>
</body>
</html>